<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <div class="well form-inline margin-top-20""><a class="btn btn-default" href="{:url('Alsdk/DescribeUserDomains')}"><<返回域名列表</a>&nbsp;&nbsp;{$domain}</div>
    <ul class="nav nav-tabs">
        <li><a href="{:url('Alsdk/DescribeLiveRecordConfig', array('domain'=>$domain))}">录制配置列表</a></li>
        <li class="active"><a href="{:url('Alsdk/AddLiveAppRecordConfig', array('domain'=>$domain))}">添加录制配置</a></li>
    </ul>
    <form action="{:url('Alsdk/AddCustomLiveStreamTranscode')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
        <div class="form-group">
            <label class="col-sm-2 control-label"><span class="form-required">*</span>AppName:</label>
            <div class="col-md-6 col-sm-10">
                <input class="form-control" type="text" name="AppName" required value="" placeholder="AppName"/>
                <p class="help-block">AppName 名称与推流地址中的 AppName 名称对应，模板才能生效</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">StreamName:</label>
            <div class="col-md-6 col-sm-10">
                <input class="form-control" type="text" name="StreamName" required value="*" placeholder="StreamName"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span class="form-required">*</span>存储格式:</label>
            <div class="col-md-6 col-sm-10">
                <select id="Format" name="Format" class="form-control">
                    <option value="mp4" >mp4</option>
                    <option value="flv" >flv</option>
                    <option value="m3u8 " >m3u8</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span class="form-required">*</span>录制周期:</label>
            <div class="col-md-6 col-sm-10">
                <input class="form-control" type="text" name="CycleDuration" required value="3600" placeholder="单位：s。取值范围：[>1]"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span class="form-required">*</span>OssBucket名称:</label>
            <div class="col-md-6 col-sm-10">
                <input class="form-control" type="text" name="OssBucket" required value="flowl" placeholder="OssBucket名称" readonly/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span class="form-required">*</span>OssEndpoint域名:</label>
            <div class="col-md-6 col-sm-10">
                <input class="form-control" type="text" name="OssEndpoint" required value="oss-cn-shanghai.aliyuncs.com" placeholder="OssEndpoint域名" readonly/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span class="form-required">*</span>OSS 存储的录制文件名:</label>
            <div class="col-md-6 col-sm-10">
                <input class="form-control" type="text" name="OssObjectPrefix" required value="record/{AppName}/{StreamName}/{EscapedStartTime}{EscapedEndTime}" placeholder="OSS 存储的录制文件名" readonly/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span class="form-required">*</span>ts 切片名称:</label>
            <div class="col-md-6 col-sm-10">
                <input class="form-control" type="text" name="SliceOssObjectPrefix" required value="record/{AppName}/{StreamName}/{UnixTimestamp}_{Sequence }" placeholder="ts 切片名称" readonly/>
                <p class="help-block">当存储格式格式是 m3u8 录制，则需要配置，表示 ts 切片名称</p>
            </div>
        </div>
        <input class="form-control" type="hidden" name="Domain" value="{$domain}"/>
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-primary" id="js-ajax-submit">{:lang("SAVE")}</button>
            <a class="btn btn-default" href="{:url('Alsdk/DescribeLiveRecordConfig', array('domain'=>$domain))}">返回</a>
        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">
    $('#js-ajax-submit').on('click', function () {
        var data = {
            Domain:$.trim($("input[name='Domain']").val()),
            AppName:$.trim($("input[name='AppName']").val()),
            StreamName:$.trim($("input[name='StreamName']").val()),
            Format:$("#Format option:selected").val(),
            CycleDuration:$.trim($("input[name='CycleDuration']").val()),
            OssBucket:$.trim($("input[name='OssBucket']").val()),
            OssEndpoint:$.trim($("input[name='OssEndpoint']").val()),
            OssObjectPrefix:$.trim($("input[name='OssObjectPrefix']").val()),
            SliceOssObjectPrefix:$.trim($("input[name='SliceOssObjectPrefix']").val()),
        }
        if ( data.AppName == '' || data.AppName == null ) {
            tishi('AppName不能为空')
            return false
        }
        $.ajax({
            url: "{:url('Alsdk/AddLiveAppRecordConfig')}",
            dataType: 'json',
            data: data,
            type: "POST",
            success: function(data){
                if (data.code == '1') {
                    noty({
                        text: data.msg,
                        type: 'success',
                        layout: 'topCenter',
                        modal: true,
                        timeout: 800,
                        callback: {
                            afterClose: function () {
                                if (data.url) {
                                    //返回带跳转地址
                                    window.location.href = data.url;
                                } else {
                                    //刷新当前页
                                    reloadPage(window);
                                }
                            }
                        }
                    }).show();
                } else if (data.code == '0') {
                    art.dialog({
                        content: data.msg,
                        icon: 'warning',
                        title: '提示',
                        ok: function () {
                            this.title(data.msg);
                            return true;
                        }
                    });
                }
            }
        });
    });

    // 信息提示
    function tishi(msg){
        art.dialog({
            id: 'warning',
            icon: 'warning',
            title: '提示',
            content: msg,
            cancelVal: '关闭',
            ok: function () {
              
            }
        });
    }
</script>
</body>
</html>
